/** 文件上传 **/
.#{$dgg}-upload-file{display: none!important; opacity: .01; filter: Alpha(opacity=1);}
.#{$dgg}-upload-list{margin: 10px 0;}
.#{$dgg}-upload-choose{padding: 0 10px; color: $gray-430;}
.#{$dgg}-upload-drag{position: relative; display: inline-block; padding: 30px; border: 1px dashed $gray-800; background-color: $white; text-align: center; cursor: pointer; color: $gray-430;}
.#{$dgg}-upload-drag .#{$dgg}-icon{font-size: 50px; color: $green;}
.#{$dgg}-upload-drag[lay-over]{border-color: $green}
.#{$dgg}-upload-form{display: inline-block;}
.#{$dgg}-upload-iframe{position: absolute; width: 0; height: 0; border: 0; visibility: hidden}
.#{$dgg}-upload-wrap{position: relative; display: inline-block; vertical-align: middle;}
.#{$dgg}-upload-wrap .#{$dgg}-upload-file{display: block!important; position: absolute; left: 0; top: 0; z-index: 10; font-size: 100px; width: 100%; height: 100%; opacity: .01; filter: Alpha(opacity=1); cursor: pointer;}

/** fixbar **/
.#{$dgg}-fixbar{position: fixed; right: 15px; bottom: 15px; z-index: 999999;}
.#{$dgg}-fixbar li{width: 50px; height: 50px; line-height: 50px; margin-bottom: 1px; text-align:center; cursor: pointer; font-size:30px; background-color: $gray-440; color:$white; border-radius: 2px; opacity: 0.95;}
.#{$dgg}-fixbar li:hover{opacity: 0.85;}
.#{$dgg}-fixbar li:active{opacity: 1;}
.#{$dgg}-fixbar .#{$dgg}-fixbar-top{display: none; font-size: 40px;}

/** 表情面板 **/
body .#{$dgg}-util-face{border: none; background: none;}
body .#{$dgg}-util-face  .#{$dgg}-layer-content{padding:0; background-color:$white; color:$gray-300; box-shadow:none}
.#{$dgg}-util-face .#{$dgg}-layer-TipsG{display:none;}
.#{$dgg}-util-face ul{position:relative; width:372px; padding:10px; border:1px solid $gray-710; background-color:$white; box-shadow: 0 0 20px rgba(0,0,0,.2);}
.#{$dgg}-util-face ul li{cursor: pointer; float: left; border: 1px solid $gray-820; height: 22px; width: 26px; overflow: hidden; margin: -1px 0 0 -1px; padding: 4px 2px; text-align: center;}
.#{$dgg}-util-face ul li:hover{position: relative; z-index: 2; border: 1px solid $orange; background: #fff9ec;}

/** 代码修饰器 **/
.#{$dgg}-code{position: relative; margin: 10px 0; padding: 15px; line-height: 20px; border: 1px solid #ddd; border-left-width: 6px; background-color: $gray-910; color: $gray-100; font-family: Courier New; font-size: 12px;}

/** 评分组件 By star1029 **/
.#{$dgg}-rate,
.#{$dgg}-rate *{display: inline-block; vertical-align: middle;}
.#{$dgg}-rate{padding: 10px 5px 10px 0; font-size: 0;}
.#{$dgg}-rate li i.#{$dgg}-icon{ font-size: 20px; color: $yellow;}
.#{$dgg}-rate li i.#{$dgg}-icon{margin-right: 5px; transition: all .3s; -webkit-transition: all .3s;}
.#{$dgg}-rate li i:hover{cursor: pointer; transform: scale(1.12); -webkit-transform: scale(1.12);}
.#{$dgg}-rate[readonly] li i:hover{cursor: default; transform: scale(1);}

/** 颜色选择器 By star1029 **/
.#{$dgg}-colorpicker{width: 26px; height: 26px; border: 1px solid $gray-810; padding: 5px; border-radius: 2px; line-height: 24px; display: inline-block; cursor: pointer; transition: all .3s; -webkit-transition: all .3s;}
.#{$dgg}-colorpicker:hover{border-color: $gray-700;}
.#{$dgg}-colorpicker.#{$dgg}-colorpicker-lg{width: 34px; height: 34px; line-height: 32px;}
.#{$dgg}-colorpicker.#{$dgg}-colorpicker-sm{width: 24px; height: 24px; line-height: 22px;}
.#{$dgg}-colorpicker.#{$dgg}-colorpicker-xs{width: 22px; height: 22px; line-height: 20px;}

.#{$dgg}-colorpicker-trigger-bgcolor{display: block; background: url();  border-radius: 2px;}
.#{$dgg}-colorpicker-trigger-span{display: block; height: 100%; box-sizing: border-box; border: 1px solid rgba(0,0,0,.15); border-radius: 2px; text-align: center;}
.#{$dgg}-colorpicker-trigger-i{display: inline-block; color: $white; font-size: 12px;}
.#{$dgg}-colorpicker-trigger-i.#{$dgg}-icon-close{color: $gray-430;}

.#{$dgg}-colorpicker-main{position: absolute; z-index: 66666666; width: 280px; padding: 7px; background: $white; border: 1px solid $gray-700; border-radius: 2px; box-shadow: 0 2px 4px rgba(0,0,0,.12);}
.#{$dgg}-colorpicker-main-wrapper{height: 180px; position: relative;}
.#{$dgg}-colorpicker-basis{width: 260px; height: 100%; position: relative;}
.#{$dgg}-colorpicker-basis-white{width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(90deg, $white, hsla(0,0%,100%,0));}
.#{$dgg}-colorpicker-basis-black{width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(0deg, $black, transparent);}
.#{$dgg}-colorpicker-basis-cursor{width: 10px; height: 10px; border: 1px solid $white; border-radius: 50%; position: absolute; top: -3px; right: -3px; cursor: pointer;}
/*滚动条颜色 未做颜色变量处理*/
.#{$dgg}-colorpicker-side{position: absolute; top: 0; right: 0; width: 12px; height: 100%; background: linear-gradient(#F00, #FF0, #0F0, #0FF, $green-200, #F0F, #F00);}
.#{$dgg}-colorpicker-side-slider{width: 100%; height: 5px; box-shadow: 0 0 1px $gray-420; box-sizing: border-box; background: $white; border-radius: 1px; border: 1px solid $gray-900; cursor: pointer; position: absolute; left: 0;}
.#{$dgg}-colorpicker-main-alpha{display: none; height: 12px; margin-top: 7px; background: url()}
.#{$dgg}-colorpicker-alpha-bgcolor{height: 100%; position: relative;}
.#{$dgg}-colorpicker-alpha-slider{width: 5px; height: 100%; box-shadow: 0 0 1px $gray-420; box-sizing: border-box; background: $white; border-radius: 1px; border: 1px solid $gray-900; cursor: pointer; position: absolute; top: 0;}
.#{$dgg}-colorpicker-main-pre{padding-top: 7px; font-size: 0;}
.#{$dgg}-colorpicker-pre{width: 20px; height: 20px;  border-radius: 2px; display: inline-block; margin-left: 6px; margin-bottom: 7px; cursor: pointer;}
.#{$dgg}-colorpicker-pre:nth-child(11n+1){margin-left: 0;}
.#{$dgg}-colorpicker-pre-isalpha{background: url()}
.#{$dgg}-colorpicker-pre.#{$dgg}-this{box-shadow: 0 0 3px 2px rgba(0,0,0,.15);}
.#{$dgg}-colorpicker-pre > div{height: 100%; border-radius: 2px;}
.#{$dgg}-colorpicker-main-input{text-align: right; padding-top: 7px;}
.#{$dgg}-colorpicker-main-input .#{$dgg}-btn-container .#{$dgg}-btn{margin: 0 0 0 10px;}
.#{$dgg}-colorpicker-main-input div.#{$dgg}-inline{float: left; margin-right: 10px; font-size: 14px;}
.#{$dgg}-colorpicker-main-input input.#{$dgg}-input{width: 150px; height: 30px; color: $gray-300;}

/** 滑块 By star1029 **/
.#{$dgg}-slider{height: 4px; background: $gray-800; border-radius: 3px; position: relative; cursor: pointer;}
.#{$dgg}-slider-bar{border-radius: 3px; position: absolute; height: 100%;}
.#{$dgg}-slider-step{position: absolute; top: 0; width: 4px; height: 4px; border-radius: 50%; background: $white; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
.#{$dgg}-slider-wrap{width: 36px; height: 36px; position: absolute; top: -16px; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 10; text-align: center;}
.#{$dgg}-slider-wrap-btn{width: 12px; height: 12px; border-radius: 50%; background: $white; display: inline-block; vertical-align: middle; cursor: pointer; transition: 0.3s;}
.#{$dgg}-slider-wrap:after{content: ""; height: 100%; display: inline-block; vertical-align: middle;}
.#{$dgg}-slider-wrap-btn:hover,
.#{$dgg}-slider-wrap-btn.#{$dgg}-slider-hover{transform: scale(1.2);}
.#{$dgg}-slider-wrap-btn.#{$dgg}-disabled:hover{transform: scale(1) !important;}
.#{$dgg}-slider-tips{position: absolute; top: -42px; z-index: 66666666; white-space:nowrap; display: none; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: $white; background: $black; border-radius: 3px; height: 25px; line-height: 25px; padding: 0 10px;}
.#{$dgg}-slider-tips:after{content: ''; position: absolute; bottom: -12px; left: 50%; margin-left: -6px; width: 0; height: 0; border-width: 6px; border-style: solid; border-color: $black transparent transparent transparent;}
.#{$dgg}-slider-input{width: 70px; height: 32px; border: 1px solid $gray-810; border-radius: 3px; font-size: 16px; line-height: 32px; position: absolute; right: 0; top: -15px;}
.#{$dgg}-slider-input-btn{display: none; position: absolute; top: 0; right: 0; width: 20px; height: 100%; border-left: 1px solid $gray-700;}
.#{$dgg}-slider-input-btn i{cursor: pointer; position: absolute; right: 0; bottom: 0; width: 20px; height: 50%; font-size: 12px; line-height: 16px; text-align: center; color: $gray-430;}
.#{$dgg}-slider-input-btn i:first-child{top: 0; border-bottom: 1px solid $gray-700;}
.#{$dgg}-slider-input-txt{height: 100%; font-size: 14px;}
.#{$dgg}-slider-input-txt input{height: 100%; border: none;}
.#{$dgg}-slider-input-btn i:hover{color: $green;}
/*垂直滑块*/
.#{$dgg}-slider-vertical{width: 4px; margin-left: 34px;}
.#{$dgg}-slider-vertical .#{$dgg}-slider-bar{width: 4px;}
.#{$dgg}-slider-vertical .#{$dgg}-slider-step{top: auto; left: 0px; -webkit-transform: translateY(50%); transform: translateY(50%);}
.#{$dgg}-slider-vertical .#{$dgg}-slider-wrap{top: auto; left: -16px; -webkit-transform: translateY(50%); transform: translateY(50%);}
.#{$dgg}-slider-vertical .#{$dgg}-slider-tips{top: auto; left: 2px;}
@media \0screen{
  .#{$dgg}-slider-wrap-btn{margin-left: -20px;}
  .#{$dgg}-slider-vertical .#{$dgg}-slider-wrap-btn{margin-left: 0; margin-bottom: -20px;}
  .#{$dgg}-slider-vertical .#{$dgg}-slider-tips{margin-left: -8px;}
  .#{$dgg}-slider > span{margin-left: 8px;}
}